*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body{
	/* background: url(../img/bg.jpg) no-repeat center; */
	background-color: #0b0b0b;
	line-height: 1.15;
}

header{
	height: 1.25rem;
	width: 100%;
	background: url(../img/head_bg.png) no-repeat top center;
	background-size: 100% 100%;
	position: relative;
	display: flex;
}

header .sel{
	flex: 2
}

header .sel select{
	font-size: 0.15rem;
	color: #FFFFFF;
	background-color: #0B0B0B;
	margin: 0.225rem;
}

header .title{
	flex: 6;
}

header .time{
	flex: 2;
}

header h1{
	color: #fff;
	font-size: 0.475rem;
	text-align: center;
	line-height: 1rem;
}

header .showTime{
	position: absolute;
	top: 0;
	right: 0.375rem;
	line-height: 0.9375rem;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.25rem;
	
}

.main{
	padding:  0.125rem 0.125rem 0rem 0.125rem;	
	display: flex;
}

.main .column{
	flex: 3;
	position: relative;
} 

.main .column:nth-child(2){
	flex: 5;
	margin: 0.1875rem;
	overflow: hidden;
}

.main .column .panel{
	height: 3.875rem;
	/* width: 100%; */
	border: 0.0125rem solid rgba(25, 186, 139, 0.17);
	background: url(../img/line.png) no-repeat;
	padding: 0 0.1875rem 0.5rem 0;
	margin-bottom: 0.1875rem;
	position: relative;
}

.main .column .panel::before{
	position: absolute;
	left: 0;
	top: 0;
	height: 0.125rem;
	width: 0.125rem;
	content: "";
	border-top: 0.025rem solid #02a6b5;
	border-left: 0.025rem solid #02a6b5;	
}

.main .column .panel::after{
	position: absolute;
	right: 0;
	top: 0;
	height: 0.125rem;
	width: 0.125rem;
	content: "";
	border-top: 0.025rem solid #02a6b5;
	border-right: 0.025rem solid #02a6b5;
}

.main .column .panel .panel-footer{
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 0.125rem;
}

.main .column .panel .panel-footer::before{
	position: absolute;
	left: 0;
	bottom: 0;
	height: 0.125rem;
	width: 0.125rem;
	content: "";
	border-left: 0.025rem solid #02a6b5;
	border-bottom: 0.025rem solid #02a6b5;
}

.main .column .panel .panel-footer::after{
	position: absolute;
	right: 0;
	bottom: 0;
	height: 0.125rem;
	width: 0.125rem;
	content: "";
	border-right: 0.025rem solid #02a6b5;
	border-bottom: 0.025rem solid #02a6b5;
}

.main .column .panel h2{
	height: 0.6rem;
	line-height: 0.6rem;
	color: #FFFFFF;
	font-size: 0.25rem;
	text-align: center;
	position: relative;
}

.main .column .panel h2 select{
	position: absolute;
	right: 0rem;
	top: 0.125rem;
	height: 0.3rem;
	width: 0.95rem;
	background-color: #0b0b0b;
	font-size: 0.0625rem;
	color: rgba(250,250,250,0.6);
}

.main .column .panel .chart{
	height: 3rem;
	margin-left: 0.1875rem;
}

.main .column .no{
	background-color: rgba(101, 132, 226, 0.1);
	padding: 0.1875rem;	
	height: 2.6rem;
	width: 100%;
}

.main .column .no::before{
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	border-top: 0.025rem solid #02a6b5;
	border-left: 0.025rem solid #02a6b5;
	width: 0.375rem;
	height: 0.125rem;
}

.main .column .no::after{
	position: absolute;
	content: "";
	bottom: 0;
	right: 0;
	border-bottom: 0.025rem solid #02a6b5;
	border-right: 0.025rem solid #02a6b5;
	width: 0.375rem;
	height: 0.125rem;
}

.main .column .no .no-hd{
	border: 0.0125rem solid rgba(25, 186, 139, 0.17);
}


.main .column .no .no-hd ul{
	display: flex;
	list-style: none;
	text-align: center;
	position: relative;
}

.main .column .no .no-hd ul::before{
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	border-top: 0.025rem solid #02a6b5;
	border-left: 0.025rem solid #02a6b5;
	width: 0.375rem;
	height: 0.125rem;
}

.main .column .no .no-hd ul::after{
	position: absolute;
	content: "";
	bottom: 0;
	right: 0;
	border-bottom: 0.025rem solid #02a6b5;
	border-right: 0.025rem solid #02a6b5;
	width: 0.375rem;
	height: 0.125rem;
}

/* 声明字体*/
@font-face {
  font-family: electronicFont;
  src: url(../font/DS-DIGIT.TTF);
}

.main .column .no .no-hd li{
	flex: 1;
	height: 1rem;
	font-size: 0.875rem;
	color: #ffeb7b;
	font-family: "electronicFont";
	position: relative;
}

.main .column .no .no-hd li:nth-child(1)::after{
	position: absolute;
	background-color:  rgba(255, 255, 255, 0.2);
	top: 20%;
	right: 0;
	height: 50%;
	width: 0.0125rem;
	content: "";
}

.main .column .no .no-bd ul{
	list-style: none;
	display: flex;
}

.main .column .no .no-bd ul li{
	flex: 1;
	text-align: center;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.225rem;
	height: 0.5rem;
	padding-top: 0.125rem;
}

.main .column .map{
	height: 10.125rem;
	position: relative;
}

.main .column .map .map1{
	width: 10.125rem;
	height: 10.125rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	/* background: url(../img/map.png) no-repeat; */
	background-size: 100% 100%;
	opacity: 0.3;
}

.main .column .map .map2{
	height: 10.125rem;
	width: 10.125rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	/* background: url(../img/lbx.png); */
	background-size: 100% 100%;
	animation: rotate1 18s linear infinite;
	opacity: 0.6;
}

@keyframes rotate1{
	from{
		transform: translate(-50%,-50%) rotate(0deg);
	}
	to{
		transform: translate(-50%,-50%) rotate(360deg);
	}
}

.main .column .map .map3{
	height: 11rem;
	width: 11rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	/* background: url(../img/jt.png); */
	background-size: 100% 100%;
	/* animation: rotate2 20s linear infinite; */
	opacity: 0.6;
}

@keyframes rotate2{
	from{
		transform: translate(-50%,-50%) rotate(0deg);
	}
	to{
		transform: translate(-50%,-50%) rotate(-360deg);
	}
}

.main .column .map .chart{
	position: absolute;
	top: 0;
	left: 0;
	height: 10.125rem;
	width: 100%;
	opacity: 0.95;
	
}

/* 约束屏幕尺寸 */
@media screen and (max-width: 1024px) {
  html {
    font-size: 42px !important;
  }
}
@media screen and (min-width: 1920px) {
  html {
    font-size: 80px !important;
  }
}